<template>
	<div>
		<el-page-header @back="handleBack" content="增加商城会员信息"></el-page-header>
		<el-row>
			<el-col :span="24">
				<el-form 
					:model="addForm" 
					label-width="auto" 
					ref="addForm" 
					:rules="rules">
					<el-form-item size="mini" prop="username" label="账号">
						<el-input placeholder="请输入" clearable v-model.trim="addForm.username" ></el-input>
					</el-form-item>
					<el-form-item size="mini" prop="phone" label="手机号">
						<el-input placeholder="请输入" clearable v-model.trim="addForm.phone" ></el-input>
					</el-form-item>
					<el-form-item size="mini" prop="password" label="密码">
						<el-input placeholder="请输入" clearable v-model.trim="addForm.password" ></el-input>
					</el-form-item>
					<el-form-item size="mini" prop="nickname" label="昵称">
						<el-input placeholder="请输入" clearable v-model.trim="addForm.nickname" ></el-input>
					</el-form-item>
					<el-form-item size="mini" prop="birthday" label="生日">
						<el-date-picker
							v-model="addForm.birthday"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							align="right"
							type="date"
							placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item size="mini" prop="sex" label="性别">
						<el-select placeholder="请选择" clearable v-model.trim="addForm.sex">
							<el-option value="1" label="男"></el-option>
							<el-option value="0" label="女"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item size="mini" prop="userTypeId" label="会员类型">
						<el-select placeholder="请选择" clearable v-model.trim="addForm.userTypeId">
							<el-option v-for="item in userTypeList" 
								:key="item.id"
								:label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item size="mini" label="头像" prop="face">
						<p-upload list-type="picture-card" :limit="1"
							 v-model="fileList"
							 action="/file/upload"
							 :before-upload="handleBeforeUpload"
							 :on-error="handleError">
						</p-upload>
					</el-form-item>
					<el-form-item size="mini">
						<el-button :loading="subLoading" @click="handleAdd" type="primary">提交</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapActions,mapState } from 'vuex';
	export default{
		name:'user-add',
		data(){
			let _this = this;
			return {
				rules:{
					username:[{
						required:true,
						message:'账号不可以为空'
					}],
					phone:[
						{
							required:true,
							message:'手机号不可以为空'
						}
					],
					sex:[
						{
							required:true,
							message:'性别不可以为空'
						}
					],
					birthday:[
						{
							required:true,
							message:'生日不可以为空'
						}
					],
					password:[{
						required:true,
						message:'密码不可以为空'
					}],
					nickname:[{
						required:true,
						message:'昵称不可以为空'
					}],
					userTypeId:[{
						required:true,
						message:'角色不可以为空'
					}],
					face:[{
						required:true,
						validator(rules,value,callback){
							//由于validator中的this对象不是本页面vue对象的实例
							//但是我们的data数据是一个函数，所以我们可以在data中把本页的this赋值给_this
							//这样我们就可以在验证器中拿到本页的fileList
							if(_this.fileList.length>0&&_this.fileList[0].url!=undefined){
								callback()
							}else{
								callback(new Error('请上传一个头像'))
							}
							
						}
					}]
				},
				fileList:[],
				addForm:{
					username:'',
					password:'',
					nickname:'',
					userTypeId:'',
					birthday:'',
					phone:'',
					sex:'',
					face:''
				},
				subLoading:false
			}
		},
		async created(){
			await this.getUserTypeListAll()
		},
		computed:{
			...mapState('shopUserModel',['userTypeList'])
		},
		methods:{
			...mapActions('shopUserModel',['getUserTypeListAll','insert']),
			handleBack(){
				this.$router.history.go(-1)
			},
			async handleAdd(){
				let valid = await this.$refs.addForm.validate().catch(err => err);
				if(valid){
					//将头像
					this.addForm.face = this.fileList[0].url
					this.subLoading = true
					await this.insert(this.addForm)
					this.subLoading = false
					this.handleBack()
				}
			},
			handleBeforeUpload(file){
				// 判断当前的文件类型如果不是这些类型的文件就弹出错误提示并中断上传操作
				if(!(file.name.indexOf('png') != -1
						 ||file.name.indexOf('jpg') != -1
						 ||file.name.indexOf('jpeg') != -1
						 ||file.name.indexOf('gif') != -1)){
					this.$notify({
						title:'提示',
						message:'只能上传图片格式的文件',
						type:'error'
					})
					// 通过return Promise.reject()可以实现中断上传操作，不在触发上传的函数
					// 但是这里要注意的是，组件内部会自动处理已经传入的fileList，在选择文件的时候就会对fileList增加一个
					// 本地数据，当我们中断上传时，组件内部会自动自行删除fileList，这样就会触发下面的beforeRemove和remove
					return Promise.reject()
				}
			},
			handleError(err){
				this.$notify({
					title:'提示',
					message:'上传失败',
					type:'error'
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
</style>
